<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name=viewport content="with=device-width,initial-scale=1.0">
<link href="../resource/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link href="../resource/css/basic.css" rel="stylesheet">
<script src="../resource/js/jquery.min.js"></script>
<script src="../resource/bootstrap/js/bootstrap.min.js"></script>
<script src="../resource/js/user.js"></script>
<script src="../resource/js/lesson.js"></script>
<script src="../resource/ueditor/ueditor.config.js"></script>
<script src="../resource/ueditor/ueditor.all.js"></script>
<script>
	$(function() {
		var $editor = new UE.ui.Editor({
			//这里可以选择自己需要的工具按钮名称
			toolbars : [ [ 'bold', 'emotion' ] ],
			//focus时自动清空初始化时的内容  
			autoClearinitialContent : true,
			//关闭字数统计  
			wordCount : false,
			//关闭elementPath  
			elementPathEnabled : false,
			//默认的编辑区域高度  
			initialFrameHeight : 200
		});
		$editor.render('editor');
		$('#btnLogout').click(logout);
		$('#commentPulish>button').click(lessonCommentPublish);
		$('#lessonComment a[data-type=reply]').click(commentReplyBtn);
		$('#commentMore').click(commentPage);
	});
</script>
<title>${lesson.title }</title>
</head>
<body>
	<nav class="navbar navbar-fixed-top navbar-primary" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<a href="../"><img class="img-responsive"
					src="../resource/image/header3.png" /></a>
			</div>
			<ul class="user nav navbar-nav navbar-right">
				<c:choose>
					<c:when test="${user != null }">
						<li><a href="#"><i class="glyphicon glyphicon-comment"></i>
								我 的 消 息</a></li>
						<li><a href="#"
							class="dropdown-toggle gropdown-block gropdown-primary"
							data-toggle="dropdown"> <img style="height: 18px"
								src="${user.logo }" /> ${user.petName} <span class="caret"></span>
						</a>
							<div class="dropdown-menu" role="menu">
								<div class="row">
									<div class="col-xs-6">
										<dl class="col-xs-offset-2">
											<dd>
												<img id="userLogo" class="img-circle img-responsive" src="${user.logo }" />
											</dd>
											<dt class="text-center">
												<a class="list-default" target="view_window"
													href="userCenter"> ${user.petName }</a>
											</dt>
										</dl>
									</div>

									<div class="col-xs-6">
										<ul class="list-unstyled">
											<li class="list-block"><a target="view_window"
												href="../userCenter"><i class="glyphicon glyphicon-home"></i>
													个 人 中 心</a></li>
											<li class="list-block"><a href="#"><i
													class="glyphicon glyphicon-comment"></i> 我 的 消 息</a></li>
											<li class="list-block"><a target="view_window"
												href="../userInfo"><i class="glyphicon glyphicon-user"></i>
													信 息 编 辑 </a></li>
											<li class="list-block"><a target="view_window"
												href="../userLesson"><i class="glyphicon glyphicon-book"></i>
													课 程 管 理</a></li>
											<li class="list-block"><a target="view_window"
												href="../userExamResults"><i
													class="glyphicon glyphicon-pencil"></i> 成 绩 查 询</a></li>
											<li class="list-block"><a id="btnLogout" href="#"><i
													class="glyphicon glyphicon-off"></i> 退 出 登 录</a></li>
										</ul>
									</div>
								</div>
								<div role="row"></div>
							</div></li>
					</c:when>
					<c:otherwise>
						<li><a href="../login"><i
								class="glyphicon glyphicon-user"></i> 登 陆</a></li>
						<li><a href="../regist"><i
								class="glyphicon glyphicon-cog"></i> 注 册</a></li>
					</c:otherwise>
				</c:choose>
			</ul>
		</div>
	</nav>
	<div class="container-fluid">
		<div class="col-sm-2">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h2 class="panel-title">课程目录</h2>
				</div>
				<div class="panel-body">
					<div id="contentList" class="list-group">
						<c:forEach items="${contentList }" var="cl">
							<c:choose>
								<c:when test="${cl.id == contentInfo.id }">
									<a class="list-group-item active" href="#">${cl.title }</a>
								</c:when>
								<c:otherwise>
									<a class="list-group-item"
										href="${lesson.id }?content=${cl.id}">${cl.title }</a>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-10">
			<div class="panel panel-default">
				<div id="navLesson" class="panel-heading">
					<ol class="breadcrumb">
						<li><a href="../"><i class="glyphicon glyphicon-home"></i>
								首页</a></li>
						<li><a href="../onlineLesson"><i
								class="glyphicon glyphicon-book"></i> 在线课程</a></li>
						<li><a href="../lessonInfo/${lesson.id }"><i
								class="glyphicon glyphicon-wrench"></i> ${lesson.title }</a></li>
						<li class="active" data-nav="content"><i
							class="glyphicon glyphicon-tag"></i>${lessonContent.title }</li>
					</ol>
				</div>
				<div class="panel-body">
					<div class="panel panel-default">
						<div class="panel-body">
							<div id="lessonContent" data-id="${contentInfo.id }">${contentInfo.info }</div>
						</div>
					</div>
					<div id="commentPulish">
						<textarea id="editor" rows="0" cols="0"></textarea>
						<br />
						<button type="button" class="btn btn-danger">留 言</button>
					</div>
					<br />
					<div id="lessonComment">
						<c:forEach items="${commentList}" var="cl">
							<div id="comment${cl.id }" class="panel panel-default">
								<div class="panel-heading">
									<span><img style="height: 26px" class="img-rounded"
										src="${cl.user.logo}" /> </span> <a href="#">${cl.user.petName }</a>
									<small class="text-muted">${fn:substring(cl.commentDate,0,19)}</small>
									<a class="pull-right" data-id="${cl.id }" data-type="reply"
										href="#">回复</a>
								</div>
								<div class="panel-body">
									<div>${cl.commentInfo}</div>

								</div>
								<c:if test="${fn:length(cl.reply) > 0}">
									<div class="panel panel-danger">
										<div class="panel-body">
											<ul class="list-group">
												<c:forEach items="${cl.reply }" var="reply">
													<li class="list-group-item">
														<div class="row">
															<ul class="list-inline">
																<li>&nbsp;<img src="${reply.user.logo }"
																	style="height: 26px" class="img-rounded" /></li>
																<li><span data-type="petName"><a href="#">${reply.user.petName}:</a></span></li>
																<li><span class="content-inline">${reply.contentInfo }</span></li>
															</ul>
														</div>
														<div class="row">
															<small class="pull-right text-muted">${fn:substring(reply.replyDate,0,19)}
																&nbsp;<a data-id="${cl.id }" data-type="reply" href="#">回复</a>
																&nbsp;
															</small>
														</div>
													</li>
												</c:forEach>
											</ul>
										</div>
									</div>
								</c:if>
							</div>
						</c:forEach>
						<div>
							<button id="commentMore" class="btn btn-default btn-block"
								type="button">查 看 更 多</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer class="navbar navbar-inverse navbar-static-bottom">
		<div class="container-fluid">
			<br />
			<div class="row">
				<div class="col-sm-3 col-sm-offset-1">
					<h4>四川交通职业技术学院在线教育</h4>
					<p>四川交通职业技术学院在线教育，让你更好的学习新知识，更便捷的学习方式</p>
				</div>
				<div class="col-sm-4 col-sm-offset-1">
					<h4>关于我们</h4>
					<span class="col-xs-4"><a href="../aboutUs">关于我们</a></span> <span
						class="col-xs-8"><a href="#">学校云</a></span> <span class="col-xs-4"><a
						href="#">联系我们</a></span> <span class="col-xs-8"><a href="#">常见问题</a></span>
					<span class="col-xs-4"><a href="#">意见反馈</a></span> <span
						class="col-xs-8"><a href="#">法律条款</a></span>
				</div>
				<div class="col-sm-3">
					<h4>关注我们</h4>
				</div>
			</div>
			<br />
			<p class="text-center">Copyright © 2015 SVTCC. All Rights
				Reserved.</p>
			<p class="text-center">四川交通职业技术学院 版权所有 | 四川交通职业技术学院在线课堂服务协议</p>
		</div>
	</footer>
</body>
</html>